import React from 'react';
import { connect } from 'react-redux'
import { messages } from "share/common";
import { Modal, Button, Table } from "antd"

import Condition from 'components/condition'
const { If } = Condition;

import 'styles/expense-report/components/expense-check-result.scss'

class ExpenseCheckResult extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
    }
  }

  formatCheckResult = () => {
    const { checkResult } = this.props;
    let warnList = [];
    let errorList = [];
    checkResult.map(item => {
      if (item.type === 0) {
        warnList.push(item)
      } else {
        errorList.push(item)
      }
    });
    //强管控项需要在前面显示
    return errorList.concat(warnList)
  };

  //检查是否可以继续提交，强管控时不允许提交报销单
  checkSubmitAble = () => {
    const { checkResult } = this.props;
    return !(checkResult.filter(item => item.type === 1).length > 0)
  };

  render() {
    const { visible, submitLoading, confirmSubmit, onCancel, overAppcolumns, overAppData } = this.props;
    return (
      <Modal title={messages('expense-parent-report.key56'/*检查结果*/)}
             visible={visible}
             footer={null}
             onCancel={onCancel}
             width={overAppData ? 850 : 520}
             wrapClassName="expense-check-result">
        {this.formatCheckResult().map((item, index) => {
          let messageList = [];
          if (item.message) {
            messageList = item.message.split('1024bugfix'); //1024bugfix 多个message时的分隔符
          }
          return (
            <div className="check-result-item" key={index}>
              <div className="result-title">{item.title}</div>
              <If value={item.subTitle}>
                <div className="result-sub-title">{item.subTitle}</div>
              </If>
              {messageList.map(messageItem => (
                <div className={`check-result-message ${item.type === 0 ? 'weak-control' : 'strong-control'}`}>
                  {messageItem}
                </div>
              ))}
              {item.title === '超申请' && overAppData && <Table
                columns={overAppcolumns}
                dataSource={overAppData}
                pagination={false}
                scroll={{ x: true }}
                bordered
              />}
            </div>
          )
        })}
        <div className="check-result-button-area">
          <Button className="back-btn" onClick={onCancel}>{messages("common.back")/*返回*/}</Button>
          <If value={this.checkSubmitAble()}>
            <Button type="primary"
                    onClick={confirmSubmit}
                    loading={submitLoading}>{messages('expense-parent-report.key12'/*继续提交*/)}</Button>
          </If>
        </div>
      </Modal>
    )
  }
}

function mapStateToProps(state) {
  return { }
}

export default connect(mapStateToProps)(ExpenseCheckResult)
